import React, { useState } from 'react';

// 定义接口
interface PosterItemProps {
    title: string;
    name: string;
    number: number;
    images: string[];
    type: string;
}

const ImageSwitcher: React.FC<PosterItemProps> = ({ title, name, number, images, type }) => {

    const [imageIndex, setImageIndex] = useState(0); // 当前显示的图片索引
    const [isHovered, setIsHovered] = useState(false); // 状态管理当前是否悬停

    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
        const { clientX, currentTarget } = event;
        const { left, width } = currentTarget.getBoundingClientRect();

        // 计算相对于容器的百分比
        const percentage = (clientX - left) / width;

        const imageCount = images.length; // 图片数量
        let newIndex = Math.floor(percentage * imageCount); // 根据百分比设置新索引
        newIndex = Math.max(0, Math.min(newIndex, imageCount - 1)); // 确保索引在合法范围内

        if (newIndex !== imageIndex) {
            setImageIndex(newIndex); // 更新图片索引
        }
    };

    const handleMouseLeave = () => {
        setImageIndex(0); // 移出图片区域时返回第一张图片
    };

    return (
        <div
            style={{
                width: '210px',
                height: '370px',
                position: 'relative',
                overflow: 'hidden',
                marginTop: '4px',
                marginBottom: '10px',
                borderRadius: '6px',
                transition: 'transform 0.3s, box-shadow 0.3s',
                transform: isHovered ? 'translateY(-4px)' : 'translateY(0)', // 悬停时上移4px
                boxShadow: isHovered ? '0 4px 15px rgba(0, 0, 0, 0.5)' : 'none', // 悬停时添加阴影
            }}
            onMouseEnter={() => setIsHovered(true)} // 鼠标进入
            onMouseLeave={() => {
                setIsHovered(false);
                handleMouseLeave();
            }} // 鼠标离开
            onMouseMove={handleMouseMove} // 鼠标移动
        >
            <img
                src={images[imageIndex]} // 使用当前索引显示的图片
                alt={title}
                style={{ width: '100%', height: '300px', borderRadius: '6px', objectFit: 'cover' }}
            />
            <div style={{
                position: 'absolute',
                bottom: '80px',
                left: '10px',
                color: 'white',
                backgroundColor: 'rgba(0, 0, 0, 0.5)', // 设置黑色透明背景
                padding: '5px', // 可选：增加内边距
                borderRadius: '4px' // 可选：设置圆角
            }}>
                <h4>{type}</h4>
            </div>
            <div style={{ padding: '4px' }}>
                <p>{title}</p>
                {isHovered && <p>{name} <span style={{ float: 'right' }}>浏览: {number}</span></p>}
            </div>
            <div
                className="progress-bar"
                style={{
                    position: 'absolute',
                    bottom: '0',
                    left: '0',
                    height: '5px',
                    width: `${(imageIndex / (images.length - 1)) * 100}%`,
                    backgroundColor: 'rgba(255, 0, 0, 0.5)',
                    transition: 'width 0.1s',
                }}
            />
        </div>
    );
};

export default ImageSwitcher;